<template>
  <div class="sales-board-des">
    <h1>传值练习： eventbus</h1>
    <div class="father">
      <h3>{{ father }}</h3>
      <span>传值给子组件 :&nbsp; {{ value }}</span>
      <p>得到子组件的值：{{ dataa }}</p>
      <button @click="fatherclick">改变值</button>
      <div>使用slot分发内容 ==>son的插槽 在子组件标签内写入</div>

      <div class="bottom">
        <p>watch</p>
        <span
          >watch的作用可以监控一个值的变换，并调用
          因为变化需要执行的方法。可以通过watch动态改变关联的状态</span
        >
        <div>
          <span>{{ a }}</span
          ><button @click="add">加</button>
          <p>watch 监控值=》old:{{ oldVal }};new:{{ val }}</p>
        </div>
        <div>
          <p>深度监控没搞懂</p>
          <span>{{ b.c }}</span>
        </div>
        <div class="bottom_bottom">
          <button @click="promise">异步</button>
        </div>
      </div>
    </div>
    <son class="son" :propsvalue="value" @event1="change($event)" >
      <div style="margin-top: 5px">
            多云，最高气温34度，最低气温28度，微风
          </div>
    </son>
    <sontwo />
  </div>
</template>

<script>
import son from "./props_son";
import sontwo from "./props_twoson";
export default {
  name: "value",
  components: {
    son,
    sontwo,
  },
  data() {
    return {
      title: "未知",
      father: "我是父组件",
      value: "123",
      dataa: "ss",
      a: 1,
      b: {
        c: 1,
      },
      oldVal: "空",
      val: "空",
    };
  },
  methods: {
    add() {
      this.a += 1;
    },
    change(data) {
      console.log(data);
      this.dataa = data;
    },
    fatherclick() {
      this.dataa = "改变值";
    },
    promise() {
      var promise = new Promise(function (resolve, reject) {
        console.log("good");
        var a = 10;
        var b = a + 25;
        if (b === 35) {
          // 一旦异步执行成功，我们就调用内置的 resolve函数，将pending状态转化为resolved，并且传入我们希望传出的执行成功后的结果。
          // 注意： 这里一旦状态转变，那么后面就一定会调用then方法中的第一个参数的函数，然后将我们传入给resolve的参数传给then方法中的第一个方法作为参数，我们就可以在then的第一个方法中使用了。

          resolve(b);
        } else {
          reject("异步执行失败");
        }
      });
      promise.then(
        function (value) {
          console.log("异步执行成功，输出执行结果：" + value);
        },
        function (error) {
          console.log("异步执行失败，输出执行结果：" + error);
        }
      );
    },
  },
  watch: {
    a(val, oldVal) {
      //普通的watch监听
      this.val = val;
      this.oldVal = oldVal;
    },
    b: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        console.log("b.c: " + val.c, oldVal.c);
      },
      deep: true, //true 深度监听
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.sales-board-des {
  border-top: 20px solid #f0f2f5;
  padding: 15px 20px;
}
.father {
  width: 1800px;
  height: 400px;
  border: 3px solid rgb(82, 233, 220);
  margin-bottom: 20px;
  margin-top: 20px;
  .bottom {
    width: 1000px;
    height: 300px;
    margin: auto;
    border: 1px solid rgb(114, 111, 111);
    span {
      color: rgb(224, 156, 107);
    }
  }
  .son {
    margin-bottom: 20px;
  }
}
</style>